<template>

  <div class="table-sortable">
    <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="timeInterval"
      :label="lableList.timeInterval"
      v-if="lableList.timeInterval"
      min-width="120"
      > 
      <template slot-scope="scope">
        <!-- 时段 -->
          <span :title="scope.row.timeInterval">
          {{scope.row.timeInterval}}
        </span>
      </template>
    </el-table-column>

    <el-table-column
      prop="timeInterval"
      :label="lableList.headPortrait"
      v-if="lableList.headPortrait"
      min-width="80"
      > 
      <template slot-scope="scope">
        <!-- 头像 -->
          <span>
            <img :src="scope.row.headPortrait" class="scope-img">
          </span>
      </template>
    </el-table-column>
    <el-table-column
      prop="agent"
      :label="lableList.agent"
      v-if="lableList.agent"
      min-width="80"
      > 
        <!-- 员工号 -->
    </el-table-column>

    <el-table-column
      prop="name"
      :label="lableList.name"
      v-if="lableList.name"
      min-width="80"
      > 
        <!-- 名字 -->
    </el-table-column>
    <el-table-column
      prop="nickname"
      :label="lableList.nickname"
      v-if="lableList.nickname"
      min-width="80"
      > 
        <!-- 昵称 -->
    </el-table-column>

    <el-table-column
      prop="province"
      :label="lableList.province"
      v-if="lableList.province"
      min-width="80"
      > 
        <!-- 省份 -->
    </el-table-column>

    <el-table-column
      prop="group"
      :label="lableList.group"
      v-if="lableList.group"
      min-width="80"
      > 
        <!-- 所在组 -->
    </el-table-column>
    <el-table-column
      prop="department"
      :label="lableList.department"
      v-if="lableList.department"
      min-width="80"
      > 
        <!-- 部门 -->
    </el-table-column>
    <!-- 来源 -->
    <el-table-column
      :label="lableList.source"
      v-if="lableList.source"
      min-width="80"
      > 
      <template slot-scope="scope">
        <span :title="scope.row.source">
          {{scope.row.source}}
        </span>
      </template>
    </el-table-column>

    <!-- 渠道 -->
    <el-table-column
      :label="lableList.channel"
      v-if="lableList.channel"
      min-width="80"
      >
      <template slot-scope="scope">
        <span :title="scope.row.channel">
          {{scope.row.channel}}
        </span>
      </template>
    </el-table-column>

    <!-- 客户总数 -->
    <el-table-column
      :label="lableList.customerCount"
      v-if="lableList.customerCount"
      min-width="80"
      >
      <template slot-scope="scope">
        <span :title="scope.row.customerCount">
          {{scope.row.customerCount}}
        </span>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.effectiveConversationCustomerNum"
      prop="effectiveConversationCustomerNum"
      v-if="lableList.effectiveConversationCustomerNum"
      min-width="140">
      <!-- 有效会话客户数 -->
    </el-table-column>

    <el-table-column
      :label="lableList.callCount"
      prop="callCount"
      v-if="lableList.callCount"
      min-width="140">
      <!-- 会话消息数统计 会话次数 -->
    </el-table-column>

    <el-table-column
      :label="lableList.passCall"
      prop="passCall"
      v-if="lableList.passCall"
      min-width="140">
      <!-- 通过会话数 -->
    </el-table-column>
    <el-table-column
      :label="lableList.passCallPer"
      prop="passCallPer"
      v-if="lableList.passCallPer"
      min-width="140">
      <!-- 通过会话率 -->
    </el-table-column>

    <el-table-column
      :label="lableList.effectiveConversationNewCustomerNum"
      prop="effectiveConversationNewCustomerNum"
      v-if="lableList.effectiveConversationNewCustomerNum"
      min-width="140"
      >
      <!-- 有效会话新客数 -->
    </el-table-column>

    <el-table-column
      :label="lableList.conversationCustomerNum"
      prop="conversationCustomerNum"
      v-if="lableList.conversationCustomerNum"
      min-width="110"
      >
      <!-- 会话客户数 -->
    </el-table-column>

    <el-table-column
      :label="lableList.newCustomerNum"
      prop="newCustomerNum"
      v-if="lableList.newCustomerNum"
      min-width="85"
      >
      <!-- 新客数 -->
    </el-table-column>

    <el-table-column
      :label="lableList.statisCount"
      prop="statisCount"
      v-if="lableList.statisCount"
      min-width="98"
      >
      <!-- 会话总数 -->
    </el-table-column>

    <el-table-column
      :label="lableList.effectiveCustomerNum"
      prop="effectiveCustomerNum"
      v-if="lableList.effectiveCustomerNum"
      min-width="110"
      >
      <!-- 有效会话数 -->
    </el-table-column>

    <el-table-column
      :label="lableList.conversationQualityDistribution"
      v-if="lableList.conversationQualityDistribution"
      >
      <!-- 会话质量分布 -->
      <template slot-scope="scope">
        <div class="conversation-quality-distribution">
          {{scope.row.conversationQualityDistribution}}
        </div>
      </template>
    </el-table-column>

    <el-table-column
      :label="lableList.averageConversationLengthTime"
      prop="averageConversationLengthTime"
      v-if="lableList.averageConversationLengthTime"
      min-width="125">
      <!-- 平均会话时长 -->
    </el-table-column>

    <el-table-column
      :label="lableList.durationOfConversation"
      prop="durationOfConversation"
      v-if="lableList.durationOfConversation"
      min-width="125">
      <!-- 会话时长 -->
    </el-table-column>

    <el-table-column
      :label="lableList.talkTime"
      prop="talkTime"
      v-if="lableList.talkTime"
      min-width="125">
      <!-- 通话时长 -->
    </el-table-column>
    <el-table-column
      :label="lableList.callTimeCountStr"
      prop="callTimeCountStr"
      v-if="lableList.callTimeCountStr"
      min-width="125">
      <!-- 通话时长 -->
    </el-table-column>
    <el-table-column
      :label="lableList.callAve"
      prop="callAve"
      v-if="lableList.callAve"
      min-width="140"
      >
      <!-- 平均会话消息数 -->
    </el-table-column>

    <el-table-column
      :label="lableList.callTimeCount"
      prop="callTimeCount"
      v-if="lableList.callTimeCount"
      min-width="140"
      >
      <!-- 通话时长统计 -->
    </el-table-column>

    <el-table-column
      :label="lableList.callTimeAve"
      prop="callTimeAve"
      v-if="lableList.callTimeAve"
      min-width="140"
      >
      <!-- 平均通话时长 -->
    </el-table-column>
    <el-table-column
      :label="lableList.listAllTimeCount"
      prop="listAllTimeCount"
      v-if="lableList.listAllTimeCount"
      min-width="140"
      >
      <!-- 等待时长统计 -->
    </el-table-column>
    <el-table-column
      :label="lableList.listAllTimeAve"
      prop="listAllTimeAve"
      v-if="lableList.listAllTimeAve"
      min-width="140"
      >
      <!-- 平均等待时长 -->
    </el-table-column>
    <el-table-column
      :label="lableList.maxListAllTime"
      prop="maxListAllTime"
      v-if="lableList.maxListAllTime"
      min-width="140"
      >
      <!-- 最大等待时长 -->
    </el-table-column>

    <el-table-column
      label=""
      className=""
      min-width="50"
      v-if="lableList.source"
      >
      <!-- 点击查看详情 -->
      <template slot-scope="scope">
        <div class="clickDetails">
          <i class="iconfont" @click="FnSeeDetails(scope)">&#xe63b;</i>
        </div>
      </template>
    </el-table-column>

    <el-table-column
      label=""
      min-width="50"
      v-if="lableList.agent"
      >
      <!-- 会话客服分析  点击查看详情 -->
      <template slot-scope="scope">
        <div class="clickDetails">
          <el-tooltip class="item" effect="dark" content="查看详情" placement="top">
            <i class="iconfont" @click="FnSeeDetails(scope)">&#xe63b;</i>
          </el-tooltip>
        </div>
      </template>
    </el-table-column>
  </el-table>
    <div class="block" v-if="talLength!=0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[15, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="talLength">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data(){
    return {

   }
  },
  props:{
    lableList:{
      default:{}
    },
    tableData:{
      default:[]
    },
    talLength:{
      required: true,
      default:0
    },
    pageSize:{
      required: true,
      default:15
    },
    pageNum:{
      required: true,
      default:1
    }

  }
  ,
  created(){

  },
  mounted(){
    // this.talLength = this.tableData.length;
  },
  methods:{
    FnSeeDetails(e){
        this.$emit('getSortableFn',{type:'seeDetails',content:e.row});//查看详情
    },
    handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.$emit('getSortableFn',{type:'pageSize',content:val})
      },
    handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.$emit('getSortableFn',{type:'pageNum',content:val})
    }

  },
  components:{

  },
  computed:{

  },
  watch:{
    'pageNum':{
      handler:function(nv,ov){
        // console.log(nv)
      },
      deep:true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.table-sortable {
  text-align: center;
  .cell,td {
    width: 100%;
    text-align: center;
    padding: 0;
  }
  .scope-img {
    width: 55px;
    height: auto;
  }
  .block {
    margin-top: 25px;
  }
}
</style>
